<!-- 链接列表 friendList -->
<template>
	<div class="backwarp">
		<el-container>
			<el-header><Header></Header></el-header>
			<el-container style="padding: 60px 0;">
				<el-aside width="240px" style="padding-bottom: 120px;">
					<BackNavList></BackNavList>
				</el-aside>
				<el-main>
					<div class="elMain">
						<div class="topCont">
							<span>文章列表</span>
							<el-button type="primary" @click="addFriendClick" >新增</el-button>
						</div>
						<el-tabs v-model="activeName">
							<el-tab-pane label="新增友链申请" name="first">
								<div class="sheetCard">
									<el-table :data="addChainList" stripe style="width: 100%" highlight-current-row>
										<el-table-column fixed prop="Id" label="ID" width="100"></el-table-column>
										<el-table-column prop="iconLink" label="LOGO" width="80">
											<template scope="scope">
												<img :src="scope.row.iconLink" width="30" class="head_pic" />
											</template>
										</el-table-column>
										<el-table-column prop="nameLink" label="链接名" width="260"></el-table-column>
										<el-table-column prop="typeLink" label="链接类型" width="80"></el-table-column>
										<el-table-column prop="herfLink" label="链接地址" width="280"></el-table-column>
										<el-table-column prop="descLink" label="链接描述" width="300"></el-table-column>
										<el-table-column prop="descLink" label="邮箱" width="200"></el-table-column>
										<el-table-column fixed="right" label="操作" width="240">
											<template slot-scope="scope">
												<el-button @click="agrChainList(scope.row.Id)" type="success" size="small" round>同意</el-button>
												<el-button @click="refChainList(scope.row.Id)" type="danger" size="small" round>拒绝</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="sheetCard">
									<div class="sheetHead">已拒绝友链</div>
									<el-table :data="jjChainList" stripe style="width: 100%" highlight-current-row>
										<el-table-column fixed prop="Id" label="ID" width="100"></el-table-column>
										<el-table-column prop="iconLink" label="LOGO" width="80">
											<template scope="scope">
												<img :src="scope.row.iconLink" width="30" class="head_pic" />
											</template>
										</el-table-column>
										<el-table-column prop="nameLink" label="链接名" width="260"></el-table-column>
										<el-table-column prop="typeLink" label="链接类型" width="80"></el-table-column>
										<el-table-column prop="herfLink" label="链接地址" width="280"></el-table-column>
										<el-table-column prop="descLink" label="链接描述" width="300"></el-table-column>
										<el-table-column prop="descLink" label="邮箱" width="200"></el-table-column>
										<el-table-column fixed="right" label="操作" width="240">
											<template slot-scope="scope">
												<el-button @click="outChainList(scope.row.Id)" type="primary" size="small" round>移出</el-button>
												<el-button @click="deletClick(scope.row.Id)" type="danger" size="small" round>彻底删除</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="友链列表" name="fourth">
								<div class="sheetCard">
									<el-table :data="friendChainList" stripe style="width: 100%" highlight-current-row>
										<el-table-column fixed prop="Id" label="ID" width="100"></el-table-column>
										<el-table-column prop="iconLink" label="LOGO" width="80">
											<template scope="scope">
												<img :src="scope.row.iconLink">
											</template>
										</el-table-column>
										<el-table-column prop="nameLink" label="链接名" width="320"></el-table-column>
										<el-table-column prop="typeLink" label="链接类型" width="100"></el-table-column>
										<el-table-column prop="herfLink" label="链接地址" width="420"></el-table-column>
										<el-table-column prop="descLink" label="链接描述" width="280"></el-table-column>
										<el-table-column fixed="right" label="操作" width="240">
											<template slot-scope="scope">
												<el-button @click="friendEdit(scope.row)" type="success" size="small" round>编辑</el-button>
												<el-button @click="deletClick(scope.row.Id)" type="danger" size="small" round>删除</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="信息板块链接列表" name="third">
								<div class="sheetCard">
									<el-table :data="infoLinkList" stripe style="width: 100%" highlight-current-row>
										<el-table-column fixed prop="Id" label="ID" width="100"></el-table-column>
										<el-table-column prop="iconLink" label="LOGO" width="80">
											<template scope="scope">
												<svg class="icon" aria-hidden="true">
													<use :xlink:href="scope.row.iconLink"></use>
												</svg>
											</template>
										</el-table-column>
										<el-table-column prop="nameLink" label="链接名" width="120"></el-table-column>
										<el-table-column prop="typeLink" label="链接类型" width="120"></el-table-column>
										<el-table-column prop="herfLink" label="链接地址" width="720"></el-table-column>
										<el-table-column prop="descLink" label="链接描述" width="160"></el-table-column>
										<el-table-column fixed="right" label="操作" width="240">
											<template slot-scope="scope">
												<el-button @click="infoEdit(scope.row)" type="success" size="small" round>编辑</el-button>
												<el-button @click="deletClick(scope.row.Id)" type="danger" size="small" round>删除</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</el-tab-pane>
							<el-tab-pane label="旧链更新申请" name="second">
								<div class="sheetCard">
									<el-table :data="oldChainUpdate" stripe style="width: 100%" highlight-current-row>
										<el-table-column fixed prop="Id" label="ID" width="100"></el-table-column>
										<el-table-column prop="iconLink" label="LOGO" width="80">
											<template scope="scope">
												<img :src="scope.row.iconLink" width="30" class="head_pic" />
											</template>
										</el-table-column>
										<el-table-column prop="nameLink" label="链接名" width="260"></el-table-column>
										<el-table-column prop="typeLink" label="链接类型" width="80"></el-table-column>
										<el-table-column prop="herfLink" label="链接地址" width="280"></el-table-column>
										<el-table-column prop="descLink" label="链接描述" width="300"></el-table-column>
										<el-table-column prop="descLink" label="邮箱" width="200"></el-table-column>
										<el-table-column fixed="right" label="操作" width="240">
											<template slot-scope="scope">
												<el-button @click="agrChainList(scope.row.Id)" type="success" size="small" round>同意</el-button>
												<el-button @click="deletClick(scope.row.Id)" type="danger" size="small" round>删除</el-button>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</el-tab-pane>
						</el-tabs>
					</div>
				</el-main>
			</el-container>
			<el-footer><a href="https://beian.miit.gov.cn">陇ICP备2021000907号-2</a></el-footer>
		</el-container>
		<!-- 弹窗__友链__新增 -->
		<el-dialog title="友链--编辑" :visible.sync="addFriendLinkDialogVisible ">
			<el-form :model="addFriendLink">
				<el-form-item label="链接名称" :label-width="formLabelWidth">
					<el-input v-model="addFriendLink.name"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" :label-width="formLabelWidth">
					<el-input v-model="addFriendLink.link"></el-input>
				</el-form-item>
				<el-form-item label="链接描述" :label-width="formLabelWidth">
					<el-input v-model="addFriendLink.desc"></el-input>
				</el-form-item>
				<el-form-item label="链接类型" :label-width="formLabelWidth">
					<el-radio-group v-model="addFriendLink.type">
						<el-radio label="extLink"><span @click="addFriendIconType = true">extLink(友链)</span></el-radio>
						<el-radio label="infoLink"><span @click="addFriendIconType = false">infoLink(首页信息)</span></el-radio>
					</el-radio-group>
				</el-form-item>
				<div v-if="addFriendIconType">
					<el-form-item label="ICON路径" :label-width="formLabelWidth">
						<el-input v-model="addFriendLink.icon"></el-input>
					</el-form-item>
					<el-form-item label="链接ICON" :label-width="formLabelWidth" style="margin-bottom:2px;">
						<img v-if="addFriendLink.icon == ''" src="../../assets/images/logoIcon.png" class="iconLink">
						<img v-else :src="addFriendLink.icon" class="iconLink">
					</el-form-item>
				</div>
				<div v-else>
					<el-form-item label="链接ICON" :label-width="formLabelWidth">
						<el-radio-group v-model="addFriendLink.icon">
							<el-radio :label="item.name" v-for="(item,index) in iconSvg" :key="index">
								<svg class="icon" aria-hidden="true">
									<use :xlink:href="item.name"></use>
								</svg>
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</div>				
				<el-form-item class="dialog-footer">
					<el-button @click="cancelButt">取 消</el-button>
					<el-button type="primary" @click="submitAddLinkForm">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 弹窗____友链列表__编辑 -->
		<el-dialog title="友链--编辑" :visible.sync="friendDialogVisible ">
			<el-form :model="friendForm" size="mini">
				<el-form-item label="链接ICON" :label-width="formLabelWidth" style="margin-bottom:-4px;">
					<img :src="friendForm.iconLink" class="iconLink">
				</el-form-item>
				<el-form-item label="链接名称" :label-width="formLabelWidth">
					<el-input v-model="friendForm.nameLink"></el-input>
				</el-form-item>
				<el-form-item label="ICON路径" :label-width="formLabelWidth">
					<el-input v-model="friendForm.iconLink"></el-input>
				</el-form-item>
				<el-form-item label="链接类型" :label-width="formLabelWidth">
					<el-radio-group v-model="friendForm.typeLink">
						<el-radio label="extLink">extLink(友链)</el-radio>
						<el-radio label="infoLink">infoLink(首页信息)</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="链接地址" :label-width="formLabelWidth">
					<el-input v-model="friendForm.herfLink"></el-input>
				</el-form-item>
				<el-form-item label="链接描述" :label-width="formLabelWidth">
					<el-input v-model="friendForm.descLink"></el-input>
				</el-form-item>
				<el-form-item label="邮箱地址" :label-width="formLabelWidth">
					<el-input v-model="friendForm.emaiLink"></el-input>
				</el-form-item>
				<el-form-item class="dialog-footer">
					<el-button type="primary" @click="submitFriendForm">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<!-- 弹窗____信息板块链接__编辑 -->
		<el-dialog title="信息板块链接--编辑" :visible.sync="infoLinkDialogVisible ">
			<el-form :model="infoLinkForm" size="mini">
				<el-form-item label="链接名称" :label-width="formLabelWidth">
					<el-input v-model="infoLinkForm.nameLink"></el-input>
				</el-form-item>
				<el-form-item label="链接类型" :label-width="formLabelWidth">
					<el-radio-group v-model="infoLinkForm.typeLink">
						<el-radio label="extLink">extLink(友链)</el-radio>
						<el-radio label="infoLink">infoLink(首页信息)</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="链接地址" :label-width="formLabelWidth">
					<el-input v-model="infoLinkForm.herfLink"></el-input>
				</el-form-item>
				<el-form-item label="链接描述" :label-width="formLabelWidth">
					<el-input v-model="infoLinkForm.descLink"></el-input>
				</el-form-item>
				<el-form-item label="链接ICON" :label-width="formLabelWidth">
					<el-radio-group v-model="infoLinkForm.iconLink">
						<el-radio :label="item.name" v-for="(item,index) in iconSvg" :key="index">
							<svg class="icon" aria-hidden="true">
								<use :xlink:href="item.name"></use>
							</svg>
						</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item class="dialog-footer">
					<el-button type="primary" @click="submitInfoLinkForm">确 定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	import Header from '../../components/back/header.vue'
	import BackNavList from '../../components/back/backNavList.vue'
	export default {
		name: 'friendList',
		data() {
			return {
				// 新增链接弹窗
				addFriendLinkDialogVisible: false,
				addFriendIconType: true,
				addFriendLink: {
					icon: '',name: '',type: '',link: '',desc: '',email:''
				},
				// 新增链接弹窗				
				addChainList: [], // 新增友链申请
				jjChainList: [], // 新增友链被拒绝
				oldChainUpdate: [], // 旧链更新申请
				infoLinkList: [], // 信息板块链接列表
				friendChainList: [], // 友链列表
				activeName: 'first',
				formLabelWidth: '120px',
				// 友链列表__编辑
				friendDialogVisible: false,
				friendForm: {
					Id:'',iconLink: '',nameLink: '',
					typeLink: '',herfLink: '',
					descLink: '',emaiLink:''
				},
				// 信息板块链接列表--编辑弹窗
				infoLinkDialogVisible: false,
				infoLinkForm: {
					Id:'',iconLink: '',nameLink: '',
					typeLink: '',herfLink: '',
					descLink: '',emaiLink:''
				},
				iconSvg:[	// 图标名数组
					{name:'#icon-icon_login'},{name:'#icon-icon_about1'},{name:'#icon-icon_regist'},
					{name:'#icon-icon_sCode'},{name:'#icon-icon_lock'},{name:'#icon-icon_mark'},
					{name:'#icon-icon_reward'},{name:'#icon-icon_mate'},{name:'#icon-icon_calen'},
					{name:'#icon-icon_pause'},{name:'#icon-icon_unlock'},{name:'#icon-icon_data'},
					{name:'#icon-icon_close'},{name:'#icon-icon_share'},{name:'#icon-icon_tip'},
					{name:'#icon-icon_phiz'},{name:'#icon-icon_find'},{name:'#icon-icon_github'},
					{name:'#icon-icon_sort'},{name:'#icon-icon_blog'},{name:'#icon-icon_gitee'},
					{name:'#icon-icon_inde'},{name:'#icon-icon_email'},{name:'#icon-icon_file'},
					{name:'#icon-icon_tag'},{name:'#icon-icon_goTop'},{name:'#icon-icon_link'},
					{name: '#icon-a-icon_mate'}
				],
			}
		},
		mounted() {this.getDataList();},
		methods: {
			getDataList() { // 数据请求
				this.$axios.post(this.HOST + '/api/blogExtLink').then(res => {
					let data = res.data.data;
					for (const i in data) {
						switch (data[i].typeLink) {
							case 'tobeLink': //  新增友链
								this.addChainList.push(data[i])
								break;
							case 'reneLink': //  旧链更新
								this.oldChainUpdate.push(data[i])
								break;
							case 'infoLink': //  信息板块链接列表
								this.infoLinkList.push(data[i])
								break;
							case 'extLink': //  友链
								this.friendChainList.push(data[i])
								break;
							case 'jujueLink': //  新增友链被拒绝
								this.jjChainList.push(data[i])
								break;
							default:
								this.addChainList.push(data[i])
						}
					}
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			pageReload(){
				this.addChainList = [];
				this.oldChainUpdate = [];
				this.infoLinkList = [];
				this.friendChainList = [];
				this.jjChainList = [];
				this.getDataList();
			},
			addFriendClick(){this.addFriendLinkDialogVisible = true;},
			submitAddLinkForm(){	// 新增友链--确定按钮
				if(this.addFriendLink.icon !== '' && this.addFriendLink.name !== '' && this.addFriendLink.link !== ''){
					this.$axios.post(this.HOST + '/api/addFriendForm', {
						icon: this.addFriendLink.icon,
						name: this.addFriendLink.name,
						type: this.addFriendLink.type,
						link: this.addFriendLink.link,
						desc: this.addFriendLink.desc,					
						email: this.addFriendLink.email,
					}).then(res => {
						this.$message({message: '提交成功',type: 'success',duration:30000});
						this.addFriendLinkDialogVisible = true;
						this.pageReload();
						console.log('提交成功', res.data)
					}).catch(err => {
						console.log(err, ' catch ')
					})
				}else{
					this.$notify.error({
						title: '错误',
						message: '链接标志、类型、链接、不能为空'
					});
				}			
			},
			cancelButt(){
				this.addFriendLinkDialogVisible = false;
				this.addFriendLink.icon = '';
				this.addFriendLink.name = '';
				this.addFriendLink.type = '';
				this.addFriendLink.link = '';
				this.addFriendLink.desc = '';
				this.addFriendLink.email = '';
			},
			deletClick(row) { // 彻底删除
				this.$axios.post(this.HOST + '/api/deleteLink', {
					Id: row,
				}).then(res => {
					this.$message({message: '已成功删除',type: 'success'});
					this.pageReload();
					console.log('提交成功', res.data)
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			agrChainList(e) { // 新增友链申请--同意
				this.$axios.post(this.HOST + '/api/modifyType', {
					Id: e,
					typeLink: 'extLink'
				}).then(res => {
					this.$message('已同意');
					this.pageReload();
					console.log('提交成功', res.data)
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			refChainList(e) { // 新增友链申请--拒绝
				this.$axios.post(this.HOST + '/api/modifyType', {
					Id: e,
					typeLink: 'jujueLink'
				}).then(res => {
					this.$message({message: '已拒绝',type: 'success'});
					this.pageReload();
					console.log('提交成功', res.data)
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			outChainList(e) { // 新增友链申请--移出
				this.$axios.post(this.HOST + '/api/modifyType', {
					Id: e,
					typeLink: 'tobeLink'
				}).then(res => {
					this.$message({message: '已移出',type: 'success'});
					this.pageReload();
					console.log('提交成功', res.data)
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			friendEdit(e){	// 友链列表--编辑按钮
				this.friendForm = e;
				this.friendDialogVisible = true;
			},
			submitFriendForm() {	// 友链列表--编辑弹窗--确定按钮
				this.$axios.post(this.HOST + '/api/editSextLink', {
					Id: this.friendForm.Id,
					email: this.friendForm.emaiLink,
					name: this.friendForm.nameLink,
					desc: this.friendForm.descLink,
					link: this.friendForm.herfLink,
					icon: this.friendForm.iconLink,
					type: this.friendForm.typeLink
				}).then(res => {
					this.$message({message: '修改成功',type: 'success'});
					this.friendDialogVisible = false;
					this.pageReload();
					console.log(res.data)
				}).catch(err => {
					console.log(err, ' catch ')
				});
			},
			infoEdit(e){	// 信息板块链接列表--编辑按钮
				this.infoLinkForm = e;	// 赋值给编辑表单
				this.infoLinkDialogVisible = true;	// 打开表单
			},
			submitInfoLinkForm() {	// 信息板块链接列表--编辑弹窗--确定按钮
				this.$axios.post(this.HOST + '/api/editSextLink', {
					Id: this.infoLinkForm.Id,
					email: this.infoLinkForm.emaiLink,
					name: this.infoLinkForm.nameLink,
					desc: this.infoLinkForm.descLink,
					link: this.infoLinkForm.herfLink,
					icon: this.infoLinkForm.iconLink,
					type: this.infoLinkForm.typeLink
				}).then(res => {
					console.log(res.data)
					this.infoLinkDialogVisible = false;
					this.$message({message: '修改成功',type: 'success'});
					this.pageReload();
				}).catch(err => {
					console.log(err, ' catch ')
				});
			},
		},
		components: {
			Header: Header,
			BackNavList: BackNavList,
		}
	}
</script>

<style>
	@import url("../../assets/css/backStyle.css");

	.backwarp .el-header {padding: 0;position: fixed;width: 100%;z-index: 9999;}
	.elMain .el-tabs__header .el-tabs__nav-wrap {background-color: #fff;border: none;margin-top: -32px;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%);padding: 0px 20px 20px 20px;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;border-top: 4px solid #f2f2f2;}
	.elMain .el-tabs__header .el-tabs__nav-wrap .el-tabs__active-bar {display: none;}
	.elMain .el-tabs__header .el-tabs__nav-wrap .el-tabs__item {font-size: 0.82rem;font-weight: bold;color: #475b6d;}
	.elMain .el-tabs__header .el-tabs__nav-wrap .is-active {color: #409EFF;font-size: 0.92rem;}
	
	.el-dialog{min-width: 320px;max-width: 600px;border-radius: 8px;}
	.el-dialog__header .el-dialog__title{font-weight: 600;color: #475b6d;}
	.el-dialog__body{padding: 20px 56px 0px 20px;}
	.el-form-item.dialog-footer{display: flex;justify-content: flex-end;align-items: center;padding: 0 0 30px 0;}
	.el-form-item .el-form-item__content .el-radio-group .el-radio{margin: 6px 8px;display: flex;justify-content: space-between;align-items: center;float: left;}
	.el-form-item .el-form-item__content .el-radio-group .el-radio .el-radio__label .icon{font-size: 26px;}
	.el-form-item .iconLink{width: 64px;}
	
	.backwarp .el-message{z-index: 99999 !important;}
</style>
